<template>
	<div class="register">
		<div>
			<el-container style="background-color:whitesmoke">
				<el-form :model="ruleForm" status-icon :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm">
				  <el-form-item >
				    <el-avatar src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png"></el-avatar>
				  </el-form-item>			  
				  <el-form-item label="昵称">
				    <el-input v-model="user.user_nickname"></el-input>
				  </el-form-item>
				  <el-form-item label="用户名">
				    <el-input v-model="user.user_name"></el-input>
				  </el-form-item>
				  <el-form-item label="真实姓名">
				    <el-input v-model="user.user_true_name"></el-input>
				  </el-form-item>
				  <el-form-item label="性别">
				    <el-radio-group v-model="user.sex">
				      <el-radio label="男"></el-radio>
				      <el-radio label="女"></el-radio>
				    </el-radio-group>
				  </el-form-item>
				  <el-form-item label="出生日期">
				      <el-col :span="11">
				        <el-date-picker type="date" placeholder="选择日期" v-model="user.birthday" style="width: 220px;" value-format="yyyy-MM-dd"></el-date-picker>
				      </el-col>
				  </el-form-item>
				  <el-form-item label="密码" >
				      <el-input  v-model="user.user_password" ></el-input>
				  </el-form-item>
				  <el-form-item label="确认密码" prop="checkPass">
				      <el-input type="password" v-model="ruleForm.checkPass" autocomplete="off"></el-input>
				  </el-form-item>
				  <el-form-item label="电话">
				    <el-input v-model="user.telephone"></el-input>
				  </el-form-item>
				  
				  
				  
				  <el-form-item>
				    <el-button @click='onRegister'>注册</el-button>
					<el-button @click='onExit'>退出</el-button>
				    
				  </el-form-item>
				</el-form>
			</el-container>
		</div>
	</div>
	

</template>

<script>
	 import RegisterService from './RegisterService';
	 export default {
		name: "Register",
	    data() {
	      var validatePass = (rule, value, callback) => {
	        if (value === '') {
	          callback(new Error('请再次输入密码'));
	        } else if (value !== this.user.user_password) {
	          callback(new Error('两次输入密码不一致!'));
	        } else {
	          callback();
	        }
	      };
	      return {
			user:{
				user_name:'',
				user_password:'',
				user_true_name:'',
				telephone:'',
				birthday:'',
				sex:'',
				user_nickname:'',
				
			},
	        ruleForm: {
	          checkPass: '',
	        },
	        rules: {
	          checkPass: [
	            { validator: validatePass, trigger: 'blur' }
	          ],
	        }
	      };
	    },
	    methods: {
	      onRegister(){
			  RegisterService.onRegister(
			  r=>{
				  if(r){
					  alert('注册成功！');
					  this.$router.push({
					  	name: 'Login'
					  });
				  }else{
					  alert('注册失败！');
				  }
			  },this.user);
		  },
		  onExit(){
			  this.$router.push({
			  	name: 'Login'
			  });
		  }
	      
	    }
	  }
</script>
	
<style lang="less" scoped>
	.register{
		height: calc(100vh);
		display: flex;
		justify-content: center;
		align-items: center;
		background: url(../../assets/timg.jpg);
	}
	.el-container{
		box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);
		height: 70%; 
		border: 1px solid #9be5ff;
		width: 400px;
		border-radius: 30px;
	}
</style>

